<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>商家详情 - 在线论坛</title>
  <!-- 引入样式 -->
  <link rel="stylesheet" href="../../elementui/elementui.css">
  <link rel="stylesheet" href="../../css/font-awesome.min.css">
  <style>
  /* 全局样式 */
  body {
    font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
    background-color: #f7f8fa;
    margin: 0;
    padding: 0;
    color: #333;
  }
  
  .section {
    width: 1200px;
    max-width: 100%;
    margin: 0 auto;
  }

  .breadcrumb-preview {
    margin: 0 auto;
    border-color: #ebeef5;
    background: #fff;
    border-width: 0 0 1px;
    width: 100%;
    border-style: solid;
    box-shadow: 0 1px 4px rgba(0,0,0,0.05);
    transition: all 0.3s ease;
  }
  
  .breadcrumb-preview .el-button {
    transition: all 0.3s ease;
  }

  .breadcrumb-preview .el-button:hover {
    transform: translateX(-3px);
  }
  
  .detail-preview {
    margin: 30px auto;
    flex-wrap: wrap;
    display: flex;
    width: 100%;
    position: relative;
    justify-content: space-between;
  }
  
  /* 商家信息样式 */
  .attr {
    min-height: 480px;
    padding: 0;
    margin: 0;
    flex-wrap: wrap;
    background: none;
    display: flex;
    width: 55%;
    position: relative;
    justify-content: space-between;
    order: 2;
  }
  
  .info {
    width: 100%;
    padding: 0;
    margin: 0;
    background: #fff;
    flex: 1;
    order: 2;
    border-radius: 10px;
    box-shadow: 0 2px 12px 0 rgba(0,0,0,0.05);
    overflow: hidden;
  }
  
  .item {
    padding: 15px 20px;
    margin: 0;
    border-color: #ebeef5;
    background: none;
    border-width: 0 0 1px;
    display: flex;
    border-style: solid;
    align-items: center;
    transition: background-color 0.3s ease;
  }
  
  .item:hover {
    background-color: #f9f9f9;
  }
  
  .item:last-child {
    border-bottom: none;
  }
  
  .item-header {
    padding: 15px 20px;
    margin: 0 0 0 0;
    overflow: hidden;
    align-items: center;
    background: #F5BB00;
    display: flex;
    line-height: 24px;
    justify-content: space-between;
    border-radius: 10px 10px 0 0;
  }
  
  .item-header-title {
    width: calc(100% - 180px);
    font-size: 18px;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #fff;
  }
  
  .storeup-btn {
    border: 1px solid rgba(255, 255, 255, 0.3);
    cursor: pointer;
    padding: 0 15px;
    line-height: 36px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.15);
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
  }
  
  .storeup-btn:hover {
    background: rgba(255, 255, 255, 0.25);
    transform: translateY(-2px);
  }
  
  .storeup-btn i {
    color: #fff;
    font-size: 16px;
    margin-right: 5px;
  }
  
  .storeup-btn span {
    color: #fff;
    font-size: 14px;
  }
  
  .lable {
    padding: 0 10px 0 0;
    color: #909399;
    text-align: right;
    width: 100px;
    font-size: 14px;
    font-weight: 500;
    line-height: 24px;
  }
  
  .value {
    padding: 0;
    font-size: 14px;
    line-height: 24px;
    color: #606266;
    flex: 1;
  }
  
  .btn-container {
    padding: 20px;
    flex-wrap: wrap;
    display: flex;
    justify-content: flex-end;
    border-top: 1px solid #ebeef5;
  }
  
  .btn {
    border: 0;
    cursor: pointer;
    padding: 0 20px;
    margin: 0 0 0 10px;
    outline: none;
    color: #fff;
    border-radius: 4px;
    line-height: 40px;
    font-size: 14px;
    height: 40px;
    transition: all 0.3s ease;
  }
  
  .btn-edit {
    background: #409EFF;
    box-shadow: 0 2px 8px rgba(64, 158, 255, 0.3);
  }
  
  .btn-edit:hover {
    background: #66b1ff;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(64, 158, 255, 0.4);
  }
  
  .btn-delete {
    background: #F56C6C;
    box-shadow: 0 2px 8px rgba(245, 108, 108, 0.3);
  }
  
  .btn-delete:hover {
    background: #f78989;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(245, 108, 108, 0.4);
  }
  
  /* 商家图片样式 */
  .image-container {
    width: 40%;
    margin: 0 5% 0 0;
    background: #fff;
    height: auto;
    order: 1;
    border-radius: 10px;
    box-shadow: 0 2px 12px 0 rgba(0,0,0,0.05);
    overflow: hidden;
  }
  
  .single-image {
    width: 100%;
    height: 480px;
    overflow: hidden;
    position: relative;
  }
  
  .single-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.8s ease;
  }
  
  .image-container:hover .single-image img {
    transform: scale(1.05);
  }
  
  /* 标签页样式 */
  .detail-tabs {
    border: none;
    width: 100%;
    box-shadow: 0 2px 12px 0 rgba(0,0,0,0.05);
    margin: 30px auto;
    background: #fff;
    order: 50;
    border-radius: 10px;
    overflow: hidden;
  }
  
  /* 分享按钮 */
  .share-view {
    box-shadow: 0 2px 12px rgba(0,0,0,0.15);
    position: fixed;
    right: 0;
    bottom: 25%;
    background: #fff;
    z-index: 11;
    border-radius: 4px 0 0 4px;
    padding: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: all 0.3s ease;
  }
  
  .share-view:hover {
    transform: translateX(-5px);
  }
  
  .share-view i {
    font-size: 22px;
    color: #606266;
    margin: 8px 0;
    cursor: pointer;
    transition: all 0.3s ease;
  }
  
  .share-view i:hover {
    color: #F5BB00;
    transform: scale(1.2);
  }
  
  /* 响应式设计 */
  @media screen and (max-width: 1200px) {
    .detail-preview {
      padding: 0 5%;
    }
  }
  
  @media screen and (max-width: 992px) {
    .detail-preview {
      flex-direction: column;
    }
    
    .attr, .image-container {
      width: 100%;
      margin: 0 0 20px 0;
      order: 2;
    }
    
    .image-container {
      order: 1;
    }
    
    .single-image {
      height: 400px;
    }
  }
  
  @media screen and (max-width: 768px) {
    .item {
      flex-direction: column;
      align-items: flex-start;
    }
    
    .lable {
      width: 100%;
      padding: 0 0 5px 0;
      text-align: left;
    }
    
    .value {
      width: 100%;
    }
    
    .item-header {
      flex-direction: column;
      align-items: flex-start;
    }
    
    .item-header-title {
      width: 100%;
      margin-bottom: 10px;
    }
    
    .single-image {
      height: 300px;
    }
  }
  </style>
</head>
<body>
  <div id="app">
    <!-- 返回按钮 -->
    <div class="breadcrumb-preview">
      <el-button size="mini" type="text" @click="backClick">
        <i class="el-icon-arrow-left"></i> 返回
      </el-button>
    </div>
    
    <!-- 详情内容 -->
    <div class="detail-preview">
      <!-- 商家信息 -->
      <div class="attr">
        <div class="info">
          <div class="item-header">
            <div class="item-header-title">{{detail.shangjiaxingming}}</div>
            <div @click="storeup(1)" v-show="!isStoreup" class="storeup-btn">
              <i class="fa fa-star-o"></i>
              <span>点我收藏 ({{detail.storeupnum || 0}})</span>
            </div>
            <div @click="storeup(-1)" v-show="isStoreup" class="storeup-btn">
              <i class="fa fa-star"></i>
              <span>取消收藏 ({{detail.storeupnum || 0}})</span>
            </div>
          </div>
          <div class="item">
            <div class="lable">联系电话</div>
            <div class="value">{{detail.lianxifangshi || '暂无'}}</div>
          </div>
          <div class="item">
            <div class="lable">商家地址</div>
            <div class="value">{{detail.dianpudizhi || '暂无'}}</div>
          </div>
          <div class="item">
            <div class="lable">经营范围</div>
            <div class="value">{{detail.jingyingfanwei || '暂无'}}</div>
          </div>
          <div class="item">
            <div class="lable">添加时间</div>
            <div class="value">{{detail.addtime || '暂无'}}</div>
          </div>
        </div>
      </div>
      
      <!-- 商家图片 -->
      <div v-if="detailBanner.length" class="image-container">
        <div class="single-image">
          <img v-if="detailBanner[0].substr(0,4)=='http'" :src="detailBanner[0]" class="image">
          <img v-else :src="baseUrl + detailBanner[0]" class="image">
        </div>
      </div>
    </div>
  </div>
  
  <!-- 引入JS库 -->
  <script src="../../js/vue.js"></script>
  <script src="../../js/config.js"></script>
  <script src="../../elementui/elementui.js"></script>
  <script src="../forum/axios.js"></script>
  <script src="../../js/jquerys.min.js"></script>
  
  <script>
    var app = new Vue({
      el: '#app',
      data: {
        tableName: 'shangjia',
        baseUrl: '',
        title: '',
        detailBanner: [],
        id: 0,
        detail: {},
        activeName: 'first',
        total: 1,
        pageSize: 5,
        pageSizes: [10, 20, 30, 50],
        totalPage: 1,
        storeupParams: {
          name: '',
          picture: '',
          refid: 0,
          tablename: 'shangjia',
          userid: localStorage.getItem('frontUserid')
        },
        isStoreup: false,
        storeupInfo: {},
        buynumber: 1,
        centerType: false,
        shareUrl: location.href
      },
      created() {
        const url = new URL(window.location.href);
        if(url.searchParams.get('centerType')) {
          this.centerType = true;
        }
        this.id = url.searchParams.get('id');
        this.init();
      },
      methods: {
        init() {
          this.baseUrl = 'http://localhost:8080/springboot1a8gh/';
          axios.get(`${this.baseUrl}shangjia/detail/${this.id}`, {}).then(res => {
            if (res.data.code == 0) {
              this.detail = res.data.data;
              this.title = this.detail.shangjiaxingming;
              this.detailBanner = this.detail.shangjiatupian ? this.detail.shangjiatupian.split(",") : [];
              
              if(localStorage.getItem('frontToken')){
                this.getStoreupStatus();
              }
            }
          });
        },
        storeup(type) {
          if (!localStorage.getItem('frontToken')) {
            this.$message({
              type: 'error',
              message: '请先登录！',
              duration: 1500
            });
            return;
          }
          
          if (type == 1 && !this.isStoreup) {
            this.storeupParams.name = this.title;
            this.storeupParams.picture = this.detailBanner[0];
            this.storeupParams.refid = this.detail.id;
            this.storeupParams.type = type;
            
            axios.post(`${this.baseUrl}storeup/add`, this.storeupParams).then(res => {
              if (res.data.code == 0) {
                this.isStoreup = true;
                this.detail.storeupnum++;
                axios.post(`${this.baseUrl}shangjia/update`, this.detail).then(res => {});
                this.$message({
                  type: 'success',
                  message: '收藏成功!',
                  duration: 1500,
                });
              }
            });
          }
          
          if (type == -1 && this.isStoreup) {
            axios.get(`${this.baseUrl}storeup/list`, {
              params: {
                page: 1, 
                limit: 1, 
                type: 1, 
                refid: this.detail.id, 
                tablename: 'shangjia', 
                userid: localStorage.getItem('frontUserid')
              }
            }).then(res => {
              if (res.data.code == 0 && res.data.data.list.length > 0) {
                this.isStoreup = true;
                this.storeupInfo = res.data.data.list[0];
                let delIds = [this.storeupInfo.id];
                
                axios.post(`${this.baseUrl}storeup/delete`, delIds).then(res => {
                  if (res.data.code == 0) {
                    this.isStoreup = false;
                    this.detail.storeupnum--;
                    axios.post(`${this.baseUrl}shangjia/update`, this.detail).then(res => {});
                    this.$message({
                      type: 'success',
                      message: '取消成功!',
                      duration: 1500,
                    });
                  }
                });
              }
            });
          }
        },
        getStoreupStatus() {
          axios.get(`${this.baseUrl}storeup/list`, {
            params: {
              page: 1, 
              limit: 1, 
              type: 1, 
              refid: this.detail.id, 
              tablename: 'shangjia', 
              userid: localStorage.getItem('frontUserid')
            }
          }).then(res => {
            if (res.data.code == 0 && res.data.data.list.length > 0) {
              this.isStoreup = true;
              this.storeupInfo = res.data.data.list[0];
            }
          });
        },
        editClick() {
          let url = `./add.html?id=${this.id}`;
          if (this.centerType) {
            url += `&centerType=1`;
          }
          window.location.href = url;
        },
        delClick() {
          this.$confirm(`确定删除商家 ${this.detail.shangjiaxingming} 吗?`, '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            axios.post(`${this.baseUrl}shangjia/delete`, [this.id]).then(res => {
              if (res.data.code == 0) {
                this.$message({
                  type: 'success',
                  message: '删除成功!',
                  duration: 1500,
                  onClose: () => {
                    this.backClick();
                  }
                });
              }
            });
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消删除'
            });          
          });
        },
        backClick() {
          history.back();
        },
        isAuth(tableName, option) {
          if (option == '新增' || option == '修改' || option == '删除' || option == '更新') {
            return true;
          }
          return true;
        }
      }
    });
  </script>
</body>
</html> 